<template>
  <div style="position: relative">
    <div class="title">
      <div style="" class="head-box">
        <img class="image1" src="../../image/headImage.jpg"/>
        <!--        <img class="image1"src=""/>-->
      </div>
      <img class="image2" src="../../image/fenge.png"/>
      <div class="text_1">
        <div class="text1">{{ specialName }}</div>
        <div class="text-stuid">{{ userId }}</div>
      </div>
    </div>
    <div class="name">
      <span class="name-cont">{{userNname}}</span>
    </div>
    <div class="box">
      <div class="box_1" @click="cancel()">
        <img class="image_1" src="../../image/Ellipse14.png"/>
        <img class="image_2" src="../../image/my1.png"/>
        <text class="text3">申请免测</text>
        <img   class="image_3" src="../../image/back.png"/>
        <img  class="image_4" src="../../image/jiantou.png"/>
      </div>
      <div class="distance"></div>
      <div class="box_1" @click="getHelpStand">
        <img class="image_1" src="../../image/Ellipse15.png"/>
        <img class="image_22" src="../../image/my2.png"/>
        <text class="text3">体测合格标准</text>
        <img class="image_3" src="../../image/back.png"/>
        <img class="image_4" src="../../image/jiantou.png"/>
      </div>
      <div class="distance"></div>
      <div class="box_1" @click="getHelpExplain">
        <img class="image_1" src="../../image/Ellipse16.png"/>
        <img class="image_22" src="../../image/my3.png"/>
        <text class="text3">体测平台说明</text>
        <img class="image_3" src="../../image/back.png"/>
        <img class="image_4" src="../../image/jiantou.png"/>
      </div>
    </div>
    <div class="button_exit" @click="exit()">
      <img class="image3" src="../../image/exit.png"/>
      <text class="text_2">退出登录</text>
    </div>
    <!--  弹框  -->
    <van-popup v-model:show="showStep" round>
      <van-nav-bar title="申请免测步骤"/>
      <van-steps class="showStep" direction="vertical" :active="state">
        <van-step>
          <h1 class="step-title">创建申请</h1>
          <p class="step-time"></p>
        </van-step>
        <van-step>
          <h1 class="step-title">上传材料</h1>
          <p class="step-time"></p>
        </van-step>
        <van-step>
          <h1 class="step-title">提交申请</h1>
          <p class="step-time"></p>
        </van-step>
        <van-step>
          <h1 class="step-title">二级学院审核</h1>
          <p class="step-time"></p>
        </van-step><van-step>
        <h1 class="step-title">体育学院审核</h1>
        <p class="step-time"></p>
      </van-step>
      </van-steps>
      <div class="step-buttons">
        <!--        <van-button  size="small" @click="cancelApplye()">取消申请</van-button>-->
        <van-button  type="primary" size="small" @click="createApply()">开始申请</van-button>
<!--        <van-button v-if="state == 0" type="primary" size="small" @click="changeApply()">发起申请</van-button>-->
<!--        <van-button v-if="state == 1" type="primary" disabled size="small" @click="">等待审核</van-button>-->
<!--        <van-button v-if="state == 2" type="primary" disabled size="small" @click="">等待审核</van-button>-->
<!--        <van-button v-if="state == 3" type="success" disabled size="small" @click="">审核完成</van-button>-->
      </div>
    </van-popup>

<!--    <div class="uploader">-->
<!--      <van-uploader v-model="fileList" :after-read="afterRead" :preview-size="[60, 40]" multiple>-->
<!--        <div class="area_photo">-->
<!--          <img class="photo" src="../../image/photo.png"/>-->
<!--          <text class="photo_text">上传</text>-->
<!--        </div>-->
<!--      </van-uploader>-->
<!--      <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/>-->

<!--    </div>-->
    <div>
      <van-popup v-model:show="show1" round >
        <div class="box2">
          <div class="text_popup">申请免测</div>


<!--          <div class="case" :v-if="this.freeTestInfo.stateDesc">-->
          <div class="case_top" :v-if="this.freeTestInfo.stateDesc">
            <!--            <img class="case_imaeg" src="../../image/box.png"/>-->
<!--            <text class="case_text">状态</text>-->
          </div>
          <div class="van-notice-box">
            <van-notice-bar :v-if="this.freeTestInfo.stateDesc"   left-icon="info-o">
              当前状态：{{ this.freeTestInfo.stateDesc }}
            </van-notice-bar>
          </div>

          <div class="case_1">
<!--            <img class="case_imaeg" src="../../image/box.png"/>-->
            <text class="case_text">申请原因</text>
          </div>
          <van-cell-group inset class="long_text-box">
            <van-field
                v-model="freeTestInfo.reason"
                rows="3"
                autosize
                label=""
                label-width="0em"
                type="textarea"
                maxlength="150"
                :readonly="state!=1 && state!=17"
                :disabled="state!=1 && state!=17"
                placeholder="请输入申请免测原因，最少15字符"
                show-word-limit
                style="font-size: 14px"
            />
          </van-cell-group>


<!--          <div class="long_text-box">-->
<!--           -->
<!--&lt;!&ndash;            <textarea class="long_text" v-model="freeTestInfo.reason"></textarea>&ndash;&gt;-->
<!--          </div>-->
<!--          <div class="xian"></div>-->
          <div class="case_1">
<!--            <img class="case_imaeg" src="../../image/box.png"/>-->
            <text class="case_text">证明材料</text>
          </div>
          <div class="uploader">
            <van-uploader v-model="fileList" :after-read="afterRead" :before-delete="deleteFile" :deletable="state==1 || state==17" :preview-size="[60, 60]" multiple>
              <div class="area_photo" v-if="state==1 || state==17">
                <img class="photo" src="../../image/photo.png"/>
                <text class="photo_text">上传</text>
              </div>
            </van-uploader>

          </div>
<!--          <div class="xian"></div>-->
<!--          <div class="button_submit" v-if="true">-->

<!--          <div class="xian"></div>-->
<!--          <van-steps direction="vertical" :active="logs.length - 1">-->
<!--          <p style="margin-left: 15px;margin-top: 5px"></p>-->
          <div class="case_1">
            <!--            <img class="case_imaeg" src="../../image/box.png"/>-->
            <text class="case_text">申请日志</text>
          </div>
          <div  class="steps-box" >
            <van-steps direction="vertical" class="steps-box-content" :active="logsLen">
              <van-step v-for="item in logs">
                <h3 class="step-title">{{item.description}}</h3>
                <p  class="text2">{{item.theDate}}</p>
              </van-step>

            </van-steps>

          </div>

          <div class="button_submit" v-if="state==1 || state==17">
            <van-row gutter="20">
              <van-col span="12">
                <van-button type="warning" block @click="submitApply()">提交申请</van-button>
              </van-col>
              <van-col span="12">
                <van-button type="primary" block @click="saveApply()">保存原因</van-button>
              </van-col>
            </van-row>
          </div>

        </div>
      </van-popup>
    </div>
    <!--    文件上传弹框-->
<!--    <van-popup v-model:show="show2" round>-->
<!--      <div class="box_file">-->
<!--        <div class="file_text">文件上传</div>-->
<!--        <div class="file_text1">点击图标上传对应证明材料</div>-->

<!--        <div class="box3">-->
<!--          <van-uploader v-model="fileLists" :after-read="afterReadFile" :preview-image="false"-->
<!--                        accept=".doc,.docx,.pdf,.xlsx,.xls">-->
<!--            <img class="file_image" src="../../image/file.png"/>-->
<!--            <text class="file_text2">+上传本地文件</text>-->
<!--          </van-uploader>-->
<!--        </div>-->
<!--      </div>-->
<!--    </van-popup>-->

    <van-popup v-model:show="show" round>
      <div class="box4">
        <div class="text_popup">申请免测</div>
        <div class="case">
          <img class="case_imaeg" src="../../image/box.png"/>
          <text class="case_text">申请表格</text>
        </div>
        <div class="text_3">张三免测申请.word</div>
        <div class="box5">
          <div class="text_4">下载原件</div>
          <div class="box_2">
            <text class="text_5">+上传</text>
          </div>
        </div>
        <div class="xian"></div>
        <div class="case_1">
          <img class="case_imaeg" src="../../image/box.png"/>
          <text class="case_text">证明材料</text>
        </div>
        <div class="text_3">张三免测申请.word</div>
        <div class="box5">
          <div class="text_4">下载原件</div>
          <div class="box_2">
            <text class="text_5">+上传</text>
          </div>
        </div>
        <div class="xian"></div>
        <div class="button_submit" @click="finish()">
          <van-button type="primary" round size="large">提交申请</van-button>
        </div>
      </div>
    </van-popup>
<!--    <van-button @click="test()"></van-button>-->


    <!--   弹出框-->
    <van-popup round v-model:show="showHelp">
      <div class="box2s" >
        <div class="tops">
          <text class="text_3s">{{ msg.title }}</text>
          <img @click="setHelpStatu()" class="image_3s" src="../../image/XX.png" />
        </div>
        <p style="margin: auto 15px;" class="text3s">  <span v-html="msg.message"></span></p>

        <div class="box4s"> <p class="text_5s">体育学院体测中心</p><p class="text_6s">{{ msg.time }}</p> </div>
        <div class="sbuttons">
          <van-button type="primary" size="small" @click="setHelpStatu()">确认查看</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>-->

<script>
import {ref} from 'vue';
import {useUserStore} from "/src/store/modules/user";
import {
  getFreeTestInfo,
  applyFreeTest,
  updateFreeTest,
  addFreeTestFile,
  delTestFile,
  pushFreeTest
} from '/src/api/freeTest'
import {getHelpInfo} from '/src/api/notice'
import { Dialog } from 'vant';
import 'vant/es/dialog/style';
// import 'vant/es/notify/style';
import Toast from 'vant/lib/toast';
import 'vant/es/toast/style';
import wx from 'weixin-js-sdk'
import { Notify } from 'vant';
import 'vant/es/notify/style';


export default {
  setup() {
    const fileList = ref([]);
    const fileLists = ref([]);
    const show = ref(false);
    //上传文件
    const afterRead = async (file) => {
      file.status = 'uploading';
      // file.message = '上传中...';
      const userStore = await useUserStore()
      const time = new Date()
      const data = await addFreeTestFile(file, userStore.getUserInfo[userStore.getUserType].id, time.getFullYear())
      // const data = addFreeTestFile(file,userStore.getUserInfo.stud.id,time.getFullYear())
      console.log('addFreeTestFile:', data)
      // file = {...file,...}
      for (const key in data.data.extend) {
        file[key] = data.data.extend[key]
      }
      if(data.data.code == 200){
        file.status = 'done'
      }else {
        // 信息渲染可能错 todo
        console.log('data.data(文件上传的错误data):',data)
        Notify({ type: 'danger', background: '#ee0a24', message: `${data.data.msg}` });
        file.status = 'failed';
        file.message = '上传失败';
      }
      // setTimeout(() => {
      //   file.status = 'failed';
      //   file.message = '上传失败';
      // }, 3000);
      //上传图片至服务器
      console.log('file:', file);
    };
    //删除文件
    const deleteFile = async (file) => {
      // console.log('state:')
      // console.log('state:',state)
      // if() {
      //   Dialog.alert({
      //     message: '当前不允许修改',
      //     // theme: 'round-button',
      //   }).then(() => {
      //     // on close
      //   });
      //   return
      // }
      file.status = 'uploading';
      file.message = '删除中...';
      console.log(file)
      const time = new Date()
      console.log('@0')
      let ryid = localStorage.getItem('ryid')
      console.log('@1',ryid,time.getFullYear(),file.id,file.diskName)
      const res = await delTestFile(ryid, time.getFullYear(), file.id, file.diskName);
      console.log(res)
      const resValue = res.response._value
      console.log('@2',resValue.code)
      if(200 == resValue.code){
        console.log('@true')
        return true
      }else {
        // 信息渲染可能错 todo
        console.log('data.data(文件删除的错误data):',data.data)
        Notify({ type: 'danger', background: '#ee0a24', message: `${data.data.msg}` });
        file.status = 'failed';
        file.message = '删除失败';
        setTimeout(() => {
          file.status = 'done';
          // file.message = '失败';
        }, 2000);
      }
      console.log('file')
      console.log(file)
    };
    //上传文件
    const afterReadFile = (file) => {
      if(state!=1) return ;
      console.log(file)
      file.status = 'uploading';
      file.message = '上传中...';

      setTimeout(() => {
        file.status = 'failed';
        file.message = '上传失败';
      }, 1000);
      //上传文件至服务器
      alert('已上传');
      show.value = true;
      console.log(file);
    };
    return {
      show,
      fileList,
      fileLists,
      afterRead,
      deleteFile,
      afterReadFile,
    };
  },
  data() {
    return {
      showStep: false,
      show1: false,
      show2: false,
      // useUserStore: useUserStore(),
      userInfo: null,
      userId: null,
      state: -1,
      freeTestInfo: {},
      logs: [],
      logsLen: 0,
      reasonCopy: '',
      specialName: '',
      show: false,
      showHelp: false,
      msg: {}
    };
  },
  methods: {
    update(e) {
      console.log(e.target.files[0])
    },
    //页面弹框
    async cancel() {
      let ryid = localStorage.getItem('ryid')
      // console.log('ryid:', localStorage.getItem('ryid'))
      const userStore = await useUserStore()
      // console.log(userStore.getUserInfo)
      const testInfo = await getFreeTestInfo(userStore.getUserInfo.stud.id);
      // console.log(testInfo.response)
      // console.log('res:',testInfo.response._value)
      // if (null == testInfo.response._value.extend.record) {

      if (true == testInfo.response._value.extend.canApply) {
        this.state = 0
        this.showStep = true;
      } else {
        if (200 != testInfo.response._value.code) {
          Notify({ type: 'danger', background: '#ee0a24', message: `${testInfo.response._value.msg}` });
          // Toast("请求失败")
          return
        }
        // console.log("1111")
        const resdata = testInfo.response._value.extend
        this.state = testInfo.response._value.extend.record.state;
        this.freeTestInfo = testInfo.response._value.extend.record
        // this.fileList = testInfo.response._value.extend.files
        console.log(resdata)
        //初始化reson
        if(undefined == testInfo.response._value.extend.record){
          //当前时间段不允许申请 todo
          Notify({ type: 'danger', background: '#ee0a24', message: '当前非免测申请时段' });
          return
        }
        if(null == this.freeTestInfo.reason){
          this.freeTestInfo.reason = ''
        }else {
          this.reasonCopy = this.freeTestInfo.reason
        }
        //渲染文件
        this.fileList = []
        if(undefined != resdata.files && resdata.files.length!=0){
          let pubSrc = resdata.virtualPath.replace(/\\/g,"/");
          resdata.files.forEach(item=>{
            let src=  pubSrc + '/' + item.diskName
            item.url = src
            item.status = 'done'
            this.fileList.push(item)
          })
        }
        this.logs = resdata.logs
        this.logsLen = resdata.logs.length -1
        this.show1 = true;

      }
      console.log(testInfo.response._value.extend.record)
      console.log(this.freeTestInfo)
    },
    //文件上传页面弹框
    pushfile() {
      this.show2 = true;
    },
    //文件上传
    upfile() {
    },
    //重新绑定个人信息
    exit() {
      // alert('你确定要退出绑定吗');
      Dialog.confirm({
        message: '确认退出体测系统？',
        // theme: 'round-button',
      }).then(() => {
        //行代码
        wx.closeWindow()
        // if (typeof WeixinJSBridge == "undefined") {
          // if (document.addEventListener) {
          //   document.addEventListener('WeixinJSBridgeReady', weixin_ClosePage, false);
          // } else if (document.attachEvent) {
          //   document.attachEvent('WeixinJSBridgeReady', weixin_ClosePage);
          //   document.attachEvent('onWeixinJSBridgeReady', weixin_ClosePage);
          // }
        // } else {
          // weixin_ClosePage();
        // }
      });
      // Toast.loading({
      //   message: '即将退出登录',
      //   forbidClick: true,
      // });
    },

    finish() {
      this.show = false;
      this.show1 = false;
      this.show2 = false;
      alert('成功提交申请');
    },
    test() {
      const userStore = useUserStore()
      this.userInfo = userStore.getUserInfo
      console.log(this.userInfo)
      console.log(this.userInfo.stud)
      console.log(this.userInfo.stud.id)
    },
    //取消申请
    cancelApplye() {
      this.showStep = false;
    },
    //创建免修申请
    async createApply() {
      this.showStep = false;
      const userStore = useUserStore()
      const data = await applyFreeTest(userStore.getUserInfo.stud.id, userStore.getUserInfo.stud.number);
      // console.log('data:::',data)
      // console.log('data.response...:::',data.response)
      // console.log('data.response._value..:::',data.response._value)
      // console.log('data.response._value.extend.:::',data.response._value.extend)
      // console.log('data.response._value.extend.:::',data.response._value.extend.code)
      if(200 == data.response._value.code){
        var date = new Date();
        this.state = 1
        let obj1 = {
          "description": "创建申请",
          "theDate": date.toLocaleString()
        }
        this.logs.push(obj1)
        this.show1 = true;
      }else {
        Notify({ type: 'danger', background: '#ee0a24', message: `失败,${data.response._value.msg}`, });
        // Toast("请求失败")
        return
      }
    },
    //修改免修申请
    async changeApply() {
      this.showStep = false;
      this.show1 = true;
    },
    //保存材料
    async saveApply() {
      console.log(this.freeTestInfo.reason)
      if(this.freeTestInfo.reason.length<15){
        Dialog.alert({
          message: '请输入最少15字符',
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        return
      }
      if(this.reasonCopy == this.freeTestInfo.reason){
        Dialog.alert({
          message: '检测到申请原因为修改，请修改后保存',
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        return
      }

      const userStore = await useUserStore()
      const data = await updateFreeTest(userStore.getUserInfo.stud.id,this.state, this.freeTestInfo.reason)
      if (200 != data.response._value.code) {
        Dialog.alert({
          message: `失败,${data.response._value.msg}`,
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        return
      }
      Dialog.alert({
        message: '保存成功',
        // theme: 'round-button',
      }).then(() => {
        // on close
      });
      this.reasonCopy = this.freeTestInfo.reason
      console.log(data)
    },
    //提交申请
    async submitApply() {
      if(this.freeTestInfo.reason.length<15){
        Dialog.alert({
          message: '请输入最少15字符',
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        return
      }
      if(this.fileList.length<1){
        Dialog.alert({
          message: '请最少上传1个文件',
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        return
      }
      for (const index in this.fileList) {
        const item = this.fileList[index]
        console.log(item)
        if(item.status != 'done'){
          // Notify({
          //   color: '#ad0000',
          //   background: '#ffe1e1',
          //   duration: 1000,
          //   message: '请确保列表所有文件正常，或者删除不正常图片' }
          // );
          Dialog.alert({
            message: '请确保列表所有文件正常，或者删除不正常图片',
            // theme: 'round-button',
          }).then(() => {
            // on close
          });
          return
        }
      }
      const userStore = await useUserStore()
      const data = await pushFreeTest(userStore.getUserInfo[userStore.getUserType].id, this.freeTestInfo.reason)
      // if(200 == data.response.value.code){
      //   Toast.success("提交成功")
      //   this.show1 = false;
        console.log('$$$$$$$$',data)
      if(undefined != data.error._value){
        Dialog.alert({
          message: `失败,${data.error._value}`,
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
      }
      // }
      if (200 != data.response._value.code) {
        Dialog.alert({
          message: `失败,${data.response._value.msg}`,
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        // Toast.fail("请求失败,稍后再试")
        return
      }else {
        Dialog.alert({
          message: `提交成功`,
          // theme: 'round-button',
        }).then(() => {
          // on close
        });
        this.show1 = false;
      }
      // Notify({
      //   background: '#ee0a24',
      //   message: '暂无发布' }
      // );
      // Toast.success("提交成功")
      // this.show1 = false;
      console.log(data)
    },
    statu() {
      //  修改阅读状态
      this.show = false;
    },
    noshow() {
      this.show = false;
    },
    rout(key) {
      this.show = true;
      console.log(key);
      this.noticeData = key
      // this.message = '<p>key.message</p>'
      this.message = key.message
    },
    //帮助文档-合格表批准
    async getHelpStand(){
      const res = await getHelpInfo(3);
      console.log('res:',res.response)
      console.log('res:',res.response._value)
      if(res.response._value.code!=200){
        Notify({
          color: '#ad0000',
          background: '#ffe1e1',
          message: `${res.response._value.msg}` }
        );
        return
      }
      console.log('res:',res.response._value.extend.records)
      if(undefined !=res.response._value.extend.records){
        this.msg = res.response._value.extend.records[0]
        this.showHelp = true
      }else {
        Notify({
          color: '#ad0000',
          background: '#ffe1e1',
          duration: 1000,
          message: '体测合格标准暂未发布' }
        );

      }
    },
    async getHelpExplain(){
      const res = await getHelpInfo(4);
      console.log('res:',res.response)
      console.log('res:',res.response._value)
      // if(undefined == res.response._value|| res.response._value.code!=200){
      if(res.response._value.code!=200){
        return
      }
      console.log('res:',res.response._value.extend.records)
      if(undefined != res.response._value.extend.records){
        this.msg = res.response._value.extend.records[0]
        this.showHelp = true
      }else {
        Notify({
          color: '#ad0000',
          background: '#ffe1e1',
          duration: 1000,
          message: '体测平台说明暂未发布' }
        );
      }
    },
    setHelpStatu(){
      this.showHelp = false
    }
  },
  beforeMount() {

    // this.userInfo = userStore.getUserInfo
    // console.log(this.userInfo)
    // console.log(this.userInfo.stud)
    // this.userId = this.userInfo.stud.id
    let ryid = localStorage.getItem('ryid')


    const useUser = useUserStore()
    console.log('userStore.getUserInfo[userStore.getUserType].id',useUser.getUserInfo[useUser.getUserType])
    this.userId = useUser.getUserInfo.stud.id
    this.specialName = useUser.getUserInfo.specialName
    this.userNname = useUser.getUserInfo[useUser.getUserType].name
    this.userId = ryid
    // const userStore = useUserStore()
    // this.userInfo = userStore.getUserInfo
    // this.userId = this.userInfo.stdu.id
  }
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.head-box {
  position: relative;
  background-image: url('src/image/xian.png');
  background-size: 100% 100%;
  height: 180px;
  width: 180px;
  overflow: hidden;
  margin-right: 90px;
}

.image1 {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
}

//.image1 {
//  position: relative;
//  left: 46px;
//  //top: 5px;
//  width: 131px;
//  height: 188px;
//  /*transform: rotate(-8.17deg);*/
//}

.image2 {
  //position: absolute;
  right: 55vw;
  //top: 75px;
  width: 5px;
  height: 149px;
}

.text_1 {
  //position: absolute;
  right: 10vw;
  //top: 115px;
}

.text_2 {
  display: flex;
  //margin-top: 35px;
  margin-left: 3vw;
  font-family: Roboto-Bold;
  font-size: 23px;
  font-weight: bold;
  color: #ffffff;
}

.text1 {
  font-family: Roboto-Bold;
  font-size: 28px;
  font-weight: bold;
  color: #262626;
}

.text2 {
  font-family: Roboto-Bold;
  font-size: 20px;
  line-height: 25px;
  //font-weight: bold;
  color: #a5a5a5;
}

.text_3 {
  display: flex;
  width: 100%;
  margin-top: 30px;
  justify-content: center;
  font-family: Roboto-Regular;
  font-size: 22px;
  font-weight: normal;
  color: #ea0000;
}

.text_4 {
  display: flex;
  margin-top: 15px;
  text-decoration: underline;
}

.name {
  display: flex;
  justify-content: center;
  width: 35%;
  margin-top: 60px;
  //margin-left: 10vw;
  flex-wrap: nowrap;
  font-family: Roboto-Bold;
  font-size: 40px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}

.name-cont {
  //width: 0;
  //margin-left: 50px;
  white-space: nowrap;
  text-align: center;
}

.box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  width: 80vw;
  //max-height: 0vh;
}

.box2,.box2s {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  //height: 850px;
  width: 80vw;
  min-height: 30vh;
  max-height: 70vh;
  padding-bottom: 15px;
  //box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
}
.box2>*{
  width: 80%;
}
.box3 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: 60px;
  margin-left: 5vw;
  width: 60vw;
  height: 260px;
  border-radius: 46px;
  background: #f9f9fb;
  box-sizing: border-box;
  border: 1px dashed #d2d7e5;
}

.box4 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 800px;
  width: 80vw;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
}

.box5 {
  display: flex;
  margin-top: 20px;
  margin-left: 5vw;
  justify-content: space-between;
}

.box_1 {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 30px;
}

.box_2 {
  display: flex;
  width: 15vw;
  height: 50px;
  justify-content: center;
  align-items: center;
  margin-left: 40vw;
  margin-top: 5px;
  border-radius: 18px;
  box-sizing: border-box;
  border: 1px solid #007aff;
}

.image_1 {
  display: flex;
  z-index: 1;
  //top: 520px;
  //width: 90px;
  height: 90px;
  width: 90px;
}

.image_2 {
  position: absolute;
  z-index: 2;
  left: 20px;
  margin-top: 10px;
  width: 60px;
  height: 78px;
}

.image_22 {
  position: absolute;
  z-index: 2;
  left: 15px;
  margin-top: 13px;
  width: 60px;
  height: 60px;
}

.image_3,.image_3s {
  display: flex;
  z-index: 1;
  width: 79px;
  height: 76px;
  margin-left: 23vw;
}

.image_4 {
  position: absolute;
  z-index: 2;
  right: 55px;
  margin-top: 28px;
  width: 18.36px;
  height: 24.73px;
}

.text3 {
  display: flex;
  width: 30vw;
  margin-left: 10vw;
  margin-top: 20px;
  font-family: Roboto-Bold;
  font-size: 33px;
  font-weight: bold;
  color: #262626;
}

.distance {
  display: flex;
  height: 100px;
}

.button_exit {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 130px;
  padding-right: 80px;
  padding-left: 20px;
  width: 220px;
  height: 94px;
  background: #055eaf;
  border-radius: 30px;
}

.image3 {
  display: flex;
  //margin-left: 5vw;
  //margin-top: 23px;
  width: 47.46px;
  height: 55px;
}

.text_popup {
  display: flex;
  height: 20px;
  width: 100%;
  font-family: Roboto-Bold;
  font-size: 38px;
  font-weight: normal;
  color: #262626;
  margin-top: 20px;
  text-align: center;
  justify-content: center;
  align-content: center;
}

.case {
  display: flex;
  margin-top: 70px;
  margin-left: 5vw;
}

.case_1 {
  display: flex;
  margin-top: 10px;
  margin-left: 5vw;
}
.case_top{

  margin-top: 40px;
}
.case_imaeg {
  display: flex;
  width: 15px;
  height: 63.55px;
}

.case_text {
  display: flex;
  width: 90vw;
  //padding: 32px 16px 16px;
  font-family: Roboto-Regular;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  color: rgba(69,90,100,.6);
}
.long_text-box{
  background-color: #ffffff;
  margin: 2% 6% 3% 6%;
  width: 88%;
}
.long_text {
  display: flex;
  margin-leftlong_text-box: 40px;
  margin-right: 40px;
  width: 80%;
  height: 200px;
  margin-top: 20px;
  font-family: SourceHanSansCN-Regular;
  font-size: 24px;
  font-weight: normal;
  border-radius: 10px;
  border: 1px solid #cacaca;
  color: #3d3d3d;
}
.van-cell-group{
  --van-cell-background-color: #ffffff;
}
.xian {
  display: flex;
  margin-top: 10px;
  margin-left: 1vw;
  margin-right: 1vw;
  width: 100%;
  height: 0px;
  border: solid #d8d8d8;
}

.photo {
  display: flex;
  //margin-left: 2.5vw;
  margin-top: 13px;
  width: 72px;
  height: 64px;
}

.uploader {
  margin-top: 15px;
  margin-left: 6%;
  margin-bottom: 15px;
  padding: 15px 10px 10px 15px;
  border-radius: 10px;
  width: calc(88% - 25px);
  min-height: 90px;

  background-color: white;
}

.area_photo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  //margin-top: 20px;
  //margin-left: 10vw;
  width: 125px;
  height: 125px;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
}

.photo_text {
  display: flex;
  //margin-left: 20px;
  font-family: Inter-Regular;
  font-size: 12px;
  font-weight: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #7b89b2;
}

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.button_submit {
  //display: flex;
  //margin: 20px;
  //margin-top: 30px;
  margin-top: 20px;
  margin-left: 6%;
  padding-bottom: 40px;
  //margin-right: 10px;
  //justify-content: space-around;
  width: 88%;
  //height: 40px;
}

.box_file {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 600px;
  width: 70vw;
}

.file_text {
  display: flex;
  margin-top: 80px;
  text-align: center;
  justify-content: center;
  align-content: center;
  height: 30px;
  width: 100%;
  font-family: Inter-ExtraBold;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
}

.file_text1 {
  display: flex;
  height: 30px;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-content: center;
  margin-top: 30px;
  font-family: Inter-Regular;
  font-size: 22px;
  font-weight: normal;
  color: #7b89b2;
}

.file_image {
  display: flex;
  margin-top: 40px;
  margin-left: 24vw;
  width: 86.94px;
  height: 102.76px;
}

.file_text2 {
  display: flex;
  margin-left: 20vw;
  margin-top: 20px;
  height: 20px;
  width: 90vw;
  font-family: Inter-Regular;
  font-size: 22px;
  font-weight: normal;
  color: #7b89b2;
}
.text-stuid{

  font-family: Roboto-Bold;
  font-size: 30px;
  line-height: 25px;
  font-weight: bold;
  margin-top: 5px;
  color: #a5a5a5;
}

.showStep {
  width: 50vw;
  margin: 30px;
  //height: 60vh;
}

/* 添加这段样式后，Primary Button 会变成红色 */
.van-steps {
  --van-step-icon-size: 3vw;
  --van-step-circle-size: 3vw;
  --van-step-circle-size: 8px;
  //--van-step-font-size: 2.6vw;
  --van-steps-background-color: #ffffff;
}

.van-nav-bar {
  --van-nav-bar-height: 66px;
  //--van-nav-bar-title-font-size: 3vw;
}

.steps-box{
  overflow: hidden;
  width: 88%;
  min-height: 80px;
  margin: 6% 6% 2% 6%;
  margin-top: 5px;
  border-radius: 8px;
  padding: 5px;
  padding-top: 10px;
  //padding-bottom: 10px;
  background-color: white;
}
.steps-box-content{
  min-height: 80px;
  border-radius: 8px;
  //padding-bottom: 10px;

}

.step-title {
  font-size: 28px;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
  min-height: 30px;
  line-height: 32px;
}

.step-time {
  margin-top: 3px;
  height: 25px;
  line-height: 25px;
}

.step-buttons {
  display: flex;
  justify-content: flex-end;
  margin: 15px 40px 15px 40px;
}

.van-button {
  --van-button-small-height: 60px;
  --van-button-small-font-size: 25px;
  --van-button-border-radius: 8px;

}

.van-button--normal {
  --van-button-normal-font-size: 25px;
  --van-button-default-height: 60px;
}

.photo_text {
  font-size: 2.3vw;
}

.van-uploader {
  --van-uploader-delete-icon-size: 30px;
}

.van-popup {
  --van-toast-font-size: 30px;
  --van-font-size-md: 30px;
  --van-toast-line-height: 30px;
  --van-toast-max-width: 50vw;
  --van-toast-default-width: 50vw;
  --van-toast-text-min-width: 50vw;
  --van-dialog-font-size: 30px;
}
.van-dialog{
  --van-dialog-font-size: 40px;
  --van-dialog-message-font-size: 30px;
}
.van-notice-box{
  margin: 3% auto 4% auto;
  width: 88%;
  margin-left: 6%;
}
.van-field__control{
  --van-field-word-limit-font-size: 30px;
}

//弹出框
.box2s {
  max-height: 1300px;
  min-height: 400px;
  width: 90vw;
}
.tops {
  margin-top: 20px;
  height: 80px;
  width: 100%;
  text-align: center;
}
.text_3s {
  font-family: Roboto-Bold;
  font-size: 38px;
  font-weight: bold;
  color: #262626;
}
.image_3s{
  //float:right;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 30px;
  height: 30px;
}
.text_4s {
  font-family: Inter-Regular;
  font-size: 24px;
  font-weight: normal;
  color: #3e3e3e;
  margin-top: 20px;
}
.text_5s {
  width: 100%;
  //display: flex;
}
.text_6s {
  width: 100%;
  //display: flex;
  //margin-left: 5vw;
}
.datatimes {
  width: 80vw;
  height: 78px;
  display: flex;
  margin-left: 5vw;
  margin-top: 60px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
  background: rgba(40, 73, 157, 0.09);
}
.t_images {
  display: flex;
  width: 46%;
}
.t_texts {
  margin-top: 20px;
  display: flex;
  width: 54%;
  font-family: Inter-Regular;
  font-size: 29px;
  font-weight: normal;
  color: #3d3d3d;
}
.textas {
  display: flex;
  margin-left: 5vw;
  width: 80vw;
  height: 700px;
  font-family: Inter-Regular;
  font-size: 29px;
  font-weight: normal;
  color: #3d3d3d;
  border: none;
}
.van-button--primary{
  --van-font-size-lg: 50px;
  --van-button-default-font-size: 18x;

}
.sbuttons {
  display: flex;
  margin-top: 30px;
  margin-left: 30vw;
  padding-bottom: 40px;
  height: 40px;
  width: 25vw;
  align-content: center;
  justify-content: center;
}

.text3s>>>img{

  width: 100%;
}
.text3s {

  ::v-deep img {
    width: 100%;
  }

  ::v-deep .image {
    margin: 10px;
  }
}
.box4s{
  width: 100%;
  text-align: right;
  float: right;
  overflow:hidden;
  margin-top: 20px;
  padding-right: 50px;
}
.box4s>*{
  overflow:hidden;
  //position: relative;
  margin-right: 100px;
  right: 100px;
  //position: relative;
  //margin-right: 0;
}

</style>
